<template>

    <div style="padding: 20px">

        <a-row style="margin-bottom: 10px">
            <a-col :span="18">
                <a-space>
                    <a-input placeholder="用户名搜索" v-model="queryParam.name"/>
                    <a-button type="primary" @click="queryUserList">
                        <template #icon>
                            <icon-search/>
                        </template>
                        查询
                    </a-button>
                </a-space>
            </a-col>
            <a-col :span="6" style="text-align: right">
                <a-button type="primary" @click="addUser">
                    <template #icon>
                        <icon-plus/>
                    </template>
                    创建用户
                </a-button>
            </a-col>
        </a-row>

        <a-table :columns="columns" :data="data" :bordered="{cell:true}" :pagination="false">
            <template #super="{ record }">
                {{ record.super == '1' ? '超级用户' : '普通用户' }}
            </template>
            <template #sysinfo="{ record }">
                {{ record.sysinfo == '1' ? '允许查看' : '禁止查看' }}
            </template>
            <template #enable="{ record }">
                <a-tag v-if="record.enable == '1'" color="green">启用</a-tag>
                <a-tag v-else>禁用</a-tag>
            </template>
            <template #optional="{ record }">
                <a-button-group>
                    <a-button v-if="record.enable == '0'" type="text" size="small"
                              @click="enableUser(record.name)" :disabled="record.name == 'root'">启用
                    </a-button>
                    <a-button v-else type="text" size="small" @click="disEnableUser(record.name)"
                              :disabled="record.name == 'root'">禁用
                    </a-button>
                    <a-dropdown @select="selectUserOption" trigger="hover">
                        <a-link>
                            更多
                        </a-link>
                        <template #content>
                            <a-doption :value="{ option: 'password',user:record }">修改密码</a-doption>
                            <a-doption :value="{ option: 'del',user:record }" :disabled="record.name == 'root'">
                                删除用户
                            </a-doption>
                            <a-doption :value="{ option: 'sysinfo_close',user:record }" v-if="record.sysinfo=='1'"
                                       :disabled="record.name == 'root'">
                                禁止查看系统信息
                            </a-doption>
                            <a-doption :value="{ option: 'sysinfo_open',user:record }" v-else
                                       :disabled="record.name == 'root'">允许查看系统信息
                            </a-doption>
                        </template>
                    </a-dropdown>
                </a-button-group>
            </template>
        </a-table>
    </div>

    <user-modal ref="userModal" @done="queryUserList"></user-modal>

    <user-password-modal ref="userPasswordModal" @done="queryUserList"></user-password-modal>

</template>

<script setup lang="ts">

import {onMounted, reactive, ref} from 'vue';
import {doQuery} from "../../scripts/mapper";
import {QueryResult} from "../../scripts/type";
import {Message, Modal} from "@arco-design/web-vue";
import UserModal from "./modal/UserModal.vue";
import UserPasswordModal from "./modal/UserPasswordModal.vue";

const userModal = ref()
const userPasswordModal = ref()

const columns:any[] = [
    {
        title: "用户名",
        dataIndex: 'name'
    }, {
        title: "用户类型",
        slotName: 'super',
        width: 150,
        filterable: {
            filters: [{
                text: '超级用户',
                value: "1",
            }, {
                text: '普通用户',
                value: "0",
            },],
            filter: (value, row) => row.super == value,
        }
    }, {
        title: "系统信息",
        slotName: 'sysinfo',
        width: 150,
        filterable: {
            filters: [{
                text: '允许查看',
                value: "1",
            }, {
                text: '禁止查看',
                value: "0",
            },],
            filter: (value, row) => row.sysinfo == value,
        }
    }, {
        title: "创建时间",
        dataIndex: 'create_time',
        width: 240,
        sortable: {
            sortDirections: ['ascend', 'descend']
        }
    }, {
        title: "状态",
        slotName: 'enable',
        width: 120,
        filterable: {
            filters: [{
                text: '启用',
                value: "1",
            }, {
                text: '禁用',
                value: "0",
            },],
            filter: (value, row) => row.enable == value,
        }
    }, {
        title: "操作",
        slotName: 'optional',
        width: 150,
    }
]
const data: any[] = reactive([])

const queryParam = reactive({
    name: ''
})


onMounted(() => {
    queryUserList()
})

const addUser = () => {
    userModal.value.add()
}

const queryUserList = () => {
    let sql = "SELECT * FROM information_schema.ins_users"

    if (queryParam.name) {
        sql += " WHERE name LIKE '%" + queryParam.name + "%'"
    }

    doQuery(sql + " ORDER BY create_time;").then((queryResult: QueryResult) => {
        if (queryResult.success && queryResult.data) {
            data.splice(0, data.length);
            queryResult.data?.forEach((dataItem: any) => {
                let dataObj = {};
                queryResult.meta?.forEach((metaItem, index) => {
                    dataObj[metaItem.columnName!] = dataItem[index]
                })
                data.push(dataObj)
            })
        } else {
            Message.error("数据用户获取失败" + (queryResult.message ? (": " + queryResult.message) : ""))
        }
    })
};

const selectUserOption = (value) => {
    switch (value.option) {
        case "del": {
            Modal.warning({
                simple: true,
                hideCancel: false,
                title: '删除用户',
                content: '确定要删除用户' + value.user.name + '吗?',
                onOk: () => {
                    delUser(value.user.name)
                }
            });
            break;
        }
        case "password": {
            userPasswordModal.value.open(value.user.name)
            break;
        }
        case "sysinfo_open": {
            Modal.warning({
                simple: true,
                hideCancel: false,
                title: '允许查看系统信息',
                content: '确定要允许用户' + value.user.name + '查看系统信息吗?',
                onOk: () => {
                    updateUser(value.user.name, 'sysinfo', 1)
                }
            });
            break;
        }
        case "sysinfo_close": {
            Modal.warning({
                simple: true,
                hideCancel: false,
                title: '禁止查看系统信息',
                content: '确定要禁止用户' + value.user.name + '查看系统信息吗?',
                onOk: () => {
                    updateUser(value.user.name, 'sysinfo', 0)
                }
            });
            break;
        }
    }
}

const enableUser = (name) => {
    Modal.warning({
        simple: true,
        hideCancel: false,
        title: '启用用户',
        content: '确定要启用' + name + '吗?',
        onOk: () => {
            updateUser(name, 'enable', 1)
        }
    });
}

const disEnableUser = (name) => {
    Modal.warning({
        simple: true,
        hideCancel: false,
        title: '禁用用户',
        content: '确定要禁用' + name + '吗?',
        onOk: () => {
            updateUser(name, 'enable', 0)
        }
    });
}

const delUser = (name) => {
    doQuery("DROP USER " + name + ";").then((queryResult: QueryResult) => {
        if (queryResult.success && queryResult.data) {
            Message.success(name + " 已删除");
            queryUserList();
        } else {
            Message.error("删除失败" + (queryResult.message ? (": " + queryResult.message) : ""))
        }
    })
}

const updateUser = (name, item, value) => {
    doQuery(`ALTER USER ${name} ${item} ${value};`).then((queryResult: QueryResult) => {
        if (queryResult.success && queryResult.data) {
            Message.success("修改成功");
            queryUserList();
        } else {
            Message.error("修改失败" + (queryResult.message ? (": " + queryResult.message) : ""))
        }
    })
}


</script>
